<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Lumino - Dashboard</title>
<style>
	table.basetable td{
		text-align:center;
		font-size:12px;
		color:#FFFFFF;
		padding-bottom:3px;
		padding-top:3px
		}
	tr.basehead td{
	text-align: center;
	font-size: 14px;
	color: #FFFFFF
		}
	 tbody tr:nth-child(odd) {  
            background-color: #1E2A4C /* green, 10% alpha */  
        }  
        tbody tr:nth-child(even) {  
            background-color: #142540 /* red, 30% alpha */  
        }  
	a.basea hover{
		color:#FFFFFF;
		text-decoration:none;
		}
		
		.head-menu a:link{
			color:#FFF;
			text-decoration:none;
			}
			.head-menu a:active{
			color:#FFF;
			text-decoration:none;
			}
			.head-menu a:hover{
			color:#FFF;
			text-decoration:none;
			}
			
			.head-menu a:visited{
			color:#FFF;
			text-decoration:none;
			}
</style>
<style type="text/css">  
    .tree {margin: 0;padding: 0;background-color:#f2f2f2;overflow: hidden;}  
    /*隐藏input*/
    .tree li input{position: absolute;left: 0;opacity: 0;z-index: 2;cursor: pointer;height: 1em;width:1em;top: 0;}  
    /*所有菜单项设置统一样式*/
    .tree li {position: relative;list-style: none;}   
    /*一级菜单加下边线*/
    .tree>li{border-bottom: 1px solid #d9d9d9;}
    /*给有子菜单的菜单项添加背景图标*/
    .tree li label {max-width:999px;cursor: pointer;display: block;margin:0 0 0 -50px;padding: 15px 10px 15px 70px;background: url(../../images/cp-detail-arrow-b.png) no-repeat right center;background-position:95% 50%;white-space:nowrap;overflow:hidden;text-overflow: ellipsis; }  
    .tree li label:hover,li label:focus{background-color:#a7a7a7;color:#fff;}
    /*清除所有展开的子菜单的display*/
    .tree li input + ol{display: none;}  
    /*当input被选中时，给所有展开的子菜单设置样式*/
    .tree input:checked + ol {padding-left:14px;height: auto;display: block;}  
    .tree input:checked + ol > li { height: auto;}  
    /*末层菜单为A标签，设置样式*/
    .tree li.file a{margin:0 -10px 0 -50px;padding: 15px 20px 15px 70px;text-decoration:none;display: block;color:#000;white-space:nowrap;overflow:hidden;text-overflow: ellipsis;} 
    .tree li.file a:hover,li.file a:focus{background-color:#a7a7a7;color:#fff;} 
    /*不同层级的菜单字体大小不同*/
    .tree .foldertop{font-size: 14px;color:#000;margin-top:40px;}
    .tree .folderOne{font-size: 14px;color:#000}
    .tree .folderTwo{font-size:12px;color:#000}
    .tree .folderThree{font-size:10px;color:#000}
</style>
<script type="text/javascript">
       $(document).ready(function() {
           //每个有子菜单的菜单项添加点击事件
           $(".tree label").click(function(){
               //获取当前菜单旁边input的check状态
               var isChecked = $(this).next("input[type='checkbox']").is(':checked');
               //展开和收齐的不同状态下更换右侧小图标
               if(isChecked){
                   $(this).css(
                       "background-image","url(../images/cp-detail-arrow-b.png)"
                   );
               }else{
                   $(this).css(
                       "background-image","url(../images/cp-detail-arrow-t.png)"
                   );
               }
           });
            
       });
   </script>


<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/datepicker3.css" rel="stylesheet">
<link href="css/styles.css" rel="stylesheet">

</head>

<body style="background:#DFDCDC">
	<script type="text/javascript" src="common/public/header.js"></script>
   
	<div style="background:#f2f2f2;position:absolute;top:75px;width:10%;bottom:0px">
    	<ol class="tree">  
    	 <!-- ---资源规划和调度--- -->
       <li>  
           <label for="folder1" class="folderOne foldertop"><img src="img/时间.png" style="width:16px;height:16px" />&nbsp;资源规划和调度</label> <input type="checkbox" id="folder1" /> 
           <ol>  
               <li>  
                   <label for="subfolder2" class="folderTwo"><img src="img/数据库.png" style="width:16px;height:16px"/>&nbsp;集群状态信息</label> <input type="checkbox" id="subfolder2"  />   
                   <ol> 
                   		<li><a href="http://10.69.35.174:8090/ResourceManagement/cluster_node.html"><label  class="folderTwo"><img src="img/元数据面板.png" style="width:16px;height:16px"/>&nbsp;CLUSTER与NODE信息 </label> <input type="checkbox" id="subfolder21"  /> </a></li>
                   		<li><a href="http://10.69.35.174:8090/ResourceManagement/pod_service.html"><label  class="folderTwo"><img src="img/元数据面板.png" style="width:16px;height:16px"/>&nbsp;POD与SERVICE信息</label> <input type="checkbox" id="subfolder21"  /> </a></li>
                   		<li><a href="http://10.69.35.174:8090/ResourceManagement/pvc.html"><label  class="folderTwo"><img src="img/元数据面板.png" style="width:16px;height:16px"/>&nbsp;PVC信息</label> <input type="checkbox" id="subfolder21"  /></a> </li>
                   </ol>   
               </li>
               <li>  
                   <a href="http://10.69.35.174:8090/ResourceManagement/add_delete.html"><label  class="folderTwo"><img src="img/数据库.png" style="width:16px;height:16px"/>&nbsp;组件添加删除</label> <input type="checkbox" id="subfolder1"  /> </a>  
               </li> 
               <li>  
                   <a href="http://10.69.35.174:8090/ResourceManagement/resource_schedule_allocate.html"><label  class="folderTwo"><img src="img/数据库.png" style="width:16px;height:16px"/>&nbsp;资源规划调度</label> <input type="checkbox" id="subfolder1"  /> </a>  
               </li> 
               <li>  
                   <a href="http://10.69.35.174:8090/ResourceManagement/dynamic_scaling.html"><label  class="folderTwo"><img src="img/数据库.png" style="width:16px;height:16px"/>&nbsp;资源动态伸缩</label> <input type="checkbox" id="subfolder1"  /> </a>  
               </li> 
               <li>  
                   <a href="http://10.69.35.174:8090/ResourceManagement/resource_estimates.html"><label  class="folderTwo"><img src="img/数据库.png" style="width:16px;height:16px"/>&nbsp;资源预估</label> <input type="checkbox" id="subfolder1"  /> </a>  
               </li> 
           </ol>  
       </li> 
       <!-- ---故障检测与诊断--- -->
       <li>  
           <label for="folder2" class="folderOne" ><img src="img/公共-星号.png" style="width:16px;height:16px" />&nbsp;故障检测与诊断</label> <input type="checkbox" id="folder2" />   
           <ol>  
                <li>  
                    <label for="subfolder3" class="folderTwo"><img src="img/数据库.png" style="width:16px;height:16px"/>&nbsp;集群组件监控</label> <input type="checkbox" id="subfolder3"  />   
                    <ol>  
                       <li class="file folderThree"><a href="cluster_monitor.html"><img src="img/元数据面板.png" style="width:16px;height:16px"/>&nbsp;集群监控</a></li> 
                       <li>
                       <li class="file folderThree"><a href="ioTDB_monitor.html"><img src="img/元数据面板.png" style="width:16px;height:16px"/>&nbsp;IoTDB监控</a></li> 
                       <li>
                       <li class="file folderThree"><a href="kvStore_monitor.html"><img src="img/元数据面板.png" style="width:16px;height:16px"/>&nbsp;KVStore监控</a></li> 
                       <li>
                       <li class="file folderThree"><a href="kingBase_monitor.html"><img src="img/元数据面板.png" style="width:16px;height:16px"/>&nbsp;KingBase监控</a></li> 
                       <li>
                       <li class="file folderThree"><a href="inGraphDB_monitor.html"><img src="img/元数据面板.png" style="width:16px;height:16px"/>&nbsp;InGraphDB监控</a></li> 
                    </ol>  
                </li> 
                <li>  
                   <label for="subfolder4" class="folderTwo"><img src="img/数据库.png" style="width:16px;height:16px"/>&nbsp;规则检测</label> <input type="checkbox" id="subfolder4"  />   
                   <ol>  
                      <li class="file folderThree"><a href="rule_configuration.html"><img src="img/元数据面板.png" style="width:16px;height:16px"/>&nbsp;规则配置</a></li> 
                      <li class="file folderThree"><a href="rule_show.html"><img src="img/元数据面板.png" style="width:16px;height:16px"/>&nbsp;规则信息展示</a></li>       
                   </ol>  
                </li> 
                <li>  
                   <label for="subfolder5" class="folderTwo"><img src="img/数据库.png" style="width:16px;height:16px"/>&nbsp;日志检测</label> <input type="checkbox" id="subfolder5"  />   
                   <ol>  
                      <li class="file folderThree"><a href="log_show.html"><img src="img/元数据面板.png" style="width:16px;height:16px"/>&nbsp;日志信息展示</a></li>
                      <li class="file folderThree"><a href="log_configuration.html"><img src="img/元数据面板.png" style="width:16px;height:16px"/>&nbsp;日志采集配置</a></li> 
                   
                   </ol>  
                </li>
                <li>
                   <a href="diagnosis_show.html"><label class="folderTwo"><img src="img/数据库.png" style="width:16px;height:16px"/>&nbsp;故障诊断与报警</label> <input type="checkbox" id="subfolder1"  /> </a>
                </li> 
           </ol>  
       </li> 
       <!-- ---系统调优--- -->
       <li>  
           <label for="folder3"  class="folderOne"><img src="img/file.png" style="width:16px;height:16px"/>&nbsp;系统调优</label> <input type="checkbox" id="folder3" />   
       </li>
       <!-- ---性能监控--- -->
       <li>  
           <label for="folder4"  class="folderOne"><img src="img/关系数据库.png" style="width:16px;height:16px"/>&nbsp;性能监控</label> <input type="checkbox" id="folder4"/>   
       </li> 
   </ol>
    </div>
    <div style="background:#DFDCDC;position:absolute;left:10%;width:90%">
    </div>
	
	<script src="js/jquery-1.11.1.min.js"></script>
	<script src="js/bootstrap.min.js"></script>
	<script src="js/chart.min.js"></script>
	<script src="js/chart-data.js"></script>
	<script src="js/easypiechart.js"></script>
	<script src="js/easypiechart-data.js"></script>
	<script src="js/bootstrap-datepicker.js"></script>
	<script>
		$('#calendar').datepicker({
		});

		!function ($) {
		    $(document).on("click","ul.nav li.parent > a > span.icon", function(){          
		        $(this).find('em:first').toggleClass("glyphicon-minus");      
		    }); 
		    $(".sidebar span.icon").find('em:first').addClass("glyphicon-plus");
		}(window.jQuery);

		$(window).on('resize', function () {
		  if ($(window).width() > 768) $('#sidebar-collapse').collapse('show')
		})
		$(window).on('resize', function () {
		  if ($(window).width() <= 767) $('#sidebar-collapse').collapse('hide')
		})
	</script>	
</body>

</html>
